<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>JTR: folder viewer </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" user-scalable="no">
    <style type="text/css">
        /* reset */
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        caption, th {
            text-align: left;
        }

        fieldset, img, a img, iframe, html, body {
            border: 0;
        }

        li {
            list-style: none;
        }

        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal;
        }

        [hidefocus] {
            outline: 0;
        }

        body {
            word-wrap: break-word;
            font: 18/normal "微软雅黑", arial, simsun;
            color: #333;
            background: #fff;
        }

        h1, h2, h3, h4, h5, h6, em, strong, b {
            font-weight: bold;
        }

        a, button {
            cursor: pointer;
            text-decoration: none;
        }

        a:hover {
            color: #888;
            text-decoration: underline;
        }

        a:visited {
            color: #888;
        }

        .g-doc {
            padding: 20px 40px 0px 20px;
        }

        a {
            margin-bottom: 5px;
        }

        a {
            display: block;
            padding-left: 20px;
        }

        h2 {
            border-bottom: 3px dotted #ccc;
            font-size: 36px;
            margin-bottom: 10px;
        }

        .prevpath {
            background: url(" ") left top no-repeat
        }

        .folder {
            background: url(" ") left top no-repeat
        }

        .file {
            background: url(" ") left top no-repeat
        }

        .u-ebtn {
            display: inline-block;
            padding: .5em .8em;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            background-color: #34495e;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
        }

        .u-ebtn:hover {
            background-color: #455a6f;
        }

        a.u-ebtn, a.u-ebtn:hover, a.u-ebtn:active {
            text-decoration: none;
            color: #fff;
        }

        .m-qrcode {
            display: none;
        }

        .m-qrcode .title {
            text-align: center;
        }

        @media (min-width: 800px) {
            .m-qrcode {
                position: fixed;
                display: block;
                top: 20px;
                right: 20px;
                padding: 20px;
                background-color: #fefefe;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                -webkit-box-shadow: 1px 1px 3px #aaa;
                -moz-box-shadow: 1px 1px 3px #aaa;
                box-shadow: 1px 1px 3px #aaa;
            }

            .m-qrcode img {
                width: 200px;
                height: 200px;
            }
        }

        .m-ips {
            border-top: 1px solid #ccc;
            margin-top: 20px;
            padding-top: 20px;
        }

        .m-ips h3 {
            margin-bottom: 12px;
            text-align: center;
        }

        .m-ips a {
            text-decoration: underline;
            font-weight: bold;
            color: #16a085;
        }
    </style>
</head>
<body>
<div class="g-doc">

    <h2>current dir:<strong id="dir">/</strong></h2>
    <ul class='m-folder'>
        <% if (prevpath != undefined) { %>
        <li><a href="<%= join('/', prevpath) %>" class='prevpath'>Upper Folder</a></li>
        <% } %>
        <% folders.forEach(function(folder){ %>
        <li>
            <a href="<%= join(pathname,folder) %>" class='folder'><%= folder %></a>
        </li>
        <% }) %>
        <% files.forEach(function(file){ %>
        <li>
            <a href="<%= join(pathname,file) %>" class='file'><%= file %></a>
        </li>
        <% }) %>
    </ul>

    <div class="m-qrcode">
        <h3 class="title">scan qrcode to open</h3>
        <div class="m-ips">
            <h3>switch ips:</h3>
            <ul>
                <% ips.forEach(function(ip){ %>
                <li><a href='http://<%= ip + ' :' + options.port + pathname %>'><%= ip + ':' + options.port %></a></li>
                <% }) %>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
